<template>
    <div>
        <!--新增按钮位置-->
        <div style="position:fixed;z-index:100;width:100%">
            <div role="button" tabindex="0" @click="addOne"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--add"
                style="position:fixed;width:50%;">
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">添加新任务</div><i
                    class="van-icon van-icon-arrow van-cell__right-icon">
                </i>
            </div>
            <div style="position:fixed;width:50%;left:50%;padding: 2px;" class="van-cell--borderless van-contact-card">
                <van-dropdown-menu title="班级选择">
                    <van-dropdown-item v-model="classId" :options="classInfos" @change="changeClass" />
                </van-dropdown-menu>
            </div>
        </div>
        <!--列表展示位置-->
        <div v-show="show == 0">
            <div style="height: 73px"></div>
            <div role="button" tabindex="0" index="0" v-for="(item, index) in tasks" :item="item"
                @click="intoEditTask(item)"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
                <i class="van-icon van-icon-contact van-cell__left-icon" />
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">
                    <div>任务名称：{{ item.name }}</div>
                    <div>结束时间：{{ item.endTime }}</div>
                </div>
                <i class="van-icon van-icon-arrow van-cell__right-icon" />
            </div>
            <div style="height: 73px"></div>
        </div>
        <!--单个添加任务信息-->
        <div v-show="show == 1">
            <div style="height: 73px"></div>
            <van-form @submit="addTask">
                <van-field v-model="name" name="name" label="任务名称" :rules="[{ required: true, message: '请填写任务名称' }]" />

                <van-field readonly clickable name="endTime" :value="endTime" label="结束时间" placeholder="点击选择日期"
                    @click="showCalendar = true" />
                <van-calendar v-model="showCalendar" @confirm="onConfirm" />

                <van-field v-model="content" rows="3" autosize label="任务要求" type="textarea" maxlength="150"
                    placeholder="请输入要求" show-word-limit />

                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交任务添加信息</van-button>
                </div>
            </van-form>
            <div style="margin: 16px;">
                <van-button round block type="primary" @click="back">返回列表</van-button>
            </div>
        </div>
        <!--任务相关的学生列表展示位置-->
        <div v-show="show == 2">
            <div style="height: 73px"></div>
            <div role="button" tabindex="0" index="0" v-for="(item, index) in students" :item="item"
                @click="gotoScore(item)"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
                <i class="van-icon van-icon-contact van-cell__left-icon" />
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">
                    <div>学生名称：{{ item.stuName }}</div>
                    <div>任务分数：{{ item.score }}</div>
                </div>
                <i class="van-icon van-icon-arrow van-cell__right-icon" />
            </div>
            <div class="van-address-list__bottom" style="height: 150px">
                <button @click="delTask"
                    class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add">
                    <div class="van-button__content"><span class="van-button__text">删除该任务</span></div>
                </button>
                <button @click="intoEdit"
                    class="van-button van-button--primary van-button--normal van-button--block van-button--round van-address-list__add">
                    <div class="van-button__content"><span class="van-button__text">修改该任务</span></div>
                </button>
                <button @click="back"
                    class="van-button van-button--info van-button--normal van-button--block van-button--round van-address-list__add">
                    <div class="van-button__content"><span class="van-button__text">返回任务列表</span></div>
                </button>
            </div>
            <div style="height: 200px"></div>
        </div>
        <div v-show="show == 3">
            <div style="height: 73px"></div>
            <van-form @submit="editTask">
                <van-field v-model="name" name="name" label="任务名称" :rules="[{ required: true, message: '请填写任务名称' }]" />

                <van-field readonly clickable name="endTime" :value="endTime" label="结束时间" placeholder="点击选择日期"
                    @click="showCalendar = true" />
                <van-calendar v-model="showCalendar" @confirm="onConfirm" />

                <van-field v-model="content" rows="3" autosize label="任务要求" type="textarea" maxlength="150"
                    placeholder="请输入要求" show-word-limit />

                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">修改任务信息</van-button>
                </div>
            </van-form>
            <div style="margin: 16px;">
                <van-button round block type="primary" @click="back">返回列表</van-button>
            </div>
        </div>
        <van-dialog v-model="showScore" title="评分模块" show-cancel-button :beforeClose="beforeClose">
            <van-cell-group>
                <van-field v-model="score" label="分数" placeholder="请输入分数" />
            </van-cell-group>
        </van-dialog>
    </div>
</template>
<script>
import req from '../../request/index'

export default {
    name: '',
    data() {
        return {
            showScore: false,
            show: 0,
            classInfos: [],
            classId: '',
            className: '',
            tasks: [],
            showCalendar: false,
            name: '',
            endTime: '',
            content: '',
            tempItem: '',
            score: '',
            students: [],
            taskStuId: ''
        };
    },
    methods: {
        editTask(values) {
            values.id = this.tempItem.id;
            values.content = this.content;
            req({
                url: "editTask",
                method: "post",
                data: values
            }).then(res => {
                console.log(res);
                this.back()
            }).catch(err => {
                console.log(err);
            })
        },
        beforeClose(val, next) {
            if (val == "confirm") {
                console.log(this.score);
                req({
                    url: "updateScore",
                    method: "post",
                    data: {
                        id: this.taskStuId,
                        score: this.score
                    }
                }).then(res => {
                    console.log(res);
                    this.getTaskWithStudent()
                }).catch(err => {
                    console.log(err);
                })
            }
            next();
        },
        intoEdit() {
            this.show = 3;
            this.name = this.tempItem.name;
            this.endTime = this.tempItem.endTime;
            this.content = this.tempItem.content;
        },
        delTask() {
            this.$dialog.confirm({
                title: '删除模块',
                message: '删除该任务：' + this.tempItem.name,
            }).then(() => {
                req({
                    url: "delTask",
                    method: "post",
                    data: {
                        id:this.tempItem.id
                    }
                }).then(res => {
                    console.log(res);
                    this.back()
                }).catch(err => {
                    console.log(err);
                })
            }).catch(() => {
                // on cancel
            });
        },
        gotoScore(item) {
            this.showScore = true;
            this.score = item.score;
            this.taskStuId = item.id;
        },
        back() {
            this.show = 0;
            this.getTasksByTeacherIdAndClassId();
        },
        addTask(vals) {
            vals.content = this.content;
            vals.relationClassId = this.classId;
            vals.relationTeacherId = this.$store.state.user.id;
            console.log(vals)
            req({
                url: "addTask",
                method: "post",
                data: vals
            }).then(res => {
                console.log(res);
                this.back()
            }).catch(err => {
                console.log(err);
            })
        },
        onConfirm(date) {
            this.endTime = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
            this.showCalendar = false;
        },
        getTasksByTeacherIdAndClassId() {
            req({
                url: "getTasksByTeacherIdAndClassId",
                method: "post",
                data: {
                    relationClassId: this.classId,
                    relationTeacherId: this.$store.state.user.id
                }
            }).then(res => {
                console.log(res);
                this.tasks = res.data.data;
            }).catch(err => {
                console.log(err);
            })
        },
        intoEditTask(item) {
            this.show = 2;
            this.tempItem = item;
            //获取该任务相关的学生的信息
            this.getTaskWithStudent();
        },
        getTaskWithStudent() {
            req({
                url: "getTaskWithStudent",
                method: "post",
                data: {
                    relationTaskId: this.tempItem.id
                }
            }).then(res => {
                console.log(res);
                this.students = res.data.data;
            }).catch(err => {
                console.log(err);
            })
        },
        changeClass(res) {
            //根据班级id获取当前的所有任务信息
            for (var i = 0; i < this.classInfos.length; i++) {
                if (this.classInfos[i].value == res) {
                    this.className = this.classInfos[i].text;
                    this.getTasksByTeacherIdAndClassId();
                }
            }
        },
        addOne() {
            this.show = 1;

            this.name = '';
            this.endTime = '';
            this.content = '';
        },
        getClassInfo() {
            req({
                url: "getClassInfo",
                method: "post",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    var data = res.data.data;
                    this.classId = res.data.data[0].id;
                    this.className = res.data.data[0].name;
                    for (var i = 0; i < data.length; i++) {
                        var x = { text: '班级1', value: 0 };
                        x.text = data[i].name;
                        x.value = data[i].id;
                        this.classInfos.push(x);
                    }
                    //根据班级id获取当前的所有任务信息
                    this.getTasksByTeacherIdAndClassId()
                }
            }).catch(err => {
                console.log(err);
            })
        },
    },
    computed: {
    },
    mounted() {
        //发送请求 获取该用户的所有班级信息
        this.getClassInfo();
    },
}
</script>
<style>
.van-dropdown-menu__bar {
    height: 68px;
}
</style>